<template>
  <div>
    <!-- 面包屑 -->
    <el-bread></el-bread>

    <!-- 添加按钮 -->
    <el-button
      type="primary"
      class="addBtn"
      size="small"
      @click="addDialog"
      plain
      >添加</el-button
    >

    <!-- 表格主体 -->
    <el-table :data="goodsList" border style="width: 100%">
      <!-- 商品编号 -->
      <el-table-column prop="id" label="商品编号" width="80"> </el-table-column>
      <!-- 商品名称 -->
      <el-table-column
        prop="goodsname"
        label="商品名称"
        width="180"
      ></el-table-column>
      <!-- 商品价格 -->
      <el-table-column
        prop="price"
        label="商品价格"
        width="140"
      ></el-table-column>
      <!-- 市场价格 -->
      <el-table-column
        prop="market_price"
        label="市场价格"
        width="140"
      ></el-table-column>
      <!-- 图片 -->
      <el-table-column prop="img" label="图片" width="260">
        <template v-slot="{ row }">
          <img :src="row.img" width="180px" height="100px" />
        </template>
      </el-table-column>
      <!-- 是否新品 -->
      <el-table-column prop="isnew" label="是否新品" width="80">
        <template v-slot="{ row }">
          <el-button v-if="row.isnew == 1" disabled type="success" size="small" plain
            >是</el-button
          >
          <el-button v-else type="info" disabled size="small" plain>否</el-button>
        </template>
      </el-table-column>
      <!-- 是否热卖 -->
      <el-table-column prop="ishot" label="是否热卖" width="80">
        <template v-slot="{ row }">
          <el-button v-if="row.ishot == 1" type="success" disabled size="small" plain
            >是</el-button
          >
          <el-button v-else type="info" disabled size="small" plain>否</el-button>
        </template>
      </el-table-column>
      <!-- 状态 -->
      <el-table-column prop="status" label="状态" width="80">
        <template v-slot="{ row }">
          <el-button v-if="row.status == 1" disabled type="success" size="small" plain
            >启用</el-button
          >
          <el-button v-else type="warning" disabled size="small" plain>禁用</el-button>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button type="primary" circle icon="el-icon-edit" @click="edit(row.id)"></el-button>
          <el-button
            type="danger"
            circle
            icon="el-icon-delete"
            @click="del(row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @current-change="changePage"
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
    >
    </el-pagination>

    <!-- Dialog弹窗 -->
    <v-dialog ref="diaLog"></v-dialog>
  </div>
</template>


<script>
//引入辅助性函数
import { mapState, mapActions } from "vuex";
//引入添加弹窗
import vDialog from "./dialog.vue";
//引入删除接口
import { delGoods } from "../../request/api";
export default {
  data() {
    return {};
  },
  //计算属性 用来使用辅助性函数 mapState
  computed: {
    ...mapState("goods", ["goodsList", "is", "pageSize", "total"]),
  },

  //方法 用来使用辅助性函数 mapActions
  methods: {
    ...mapActions("goods", ["getGoods", "getGoodsTotal", "getPage"]),

    //点击添加按钮
    addDialog() {
      //显示弹窗
      this.$store.commit("goods/changeDialog", true);
    }, 

    //点击删除事件
    del(id) {
      this.$del(() => {
        //删除接口
        delGoods({ id }).then((res) => {
          if (res.code == 200) {
            //成功提示
            this.$message.success(res.msg);
            //获取数据 刷新页面
            this.getGoods();
            this.getGoodsTotal();
          } else {
            //失败提示
            this.$message.error(res.msg);
          }
        });
      });
    },

    //点击编辑 回显数据
    edit(id){
      this.$refs.diaLog.dataForm(id);
      //打开弹窗
      this.$store.commit('goods/changeDialog',true);
    },

    //切换页码事件
    changePage(e) {
      //触发切换页码事件
      this.getPage(e);
    },
  },

  //挂载完成
  mounted() {
    //获取数据
    this.getGoods();
    //获取总条数
    this.getGoodsTotal();
  },

  //注册组件
  components: {
    vDialog,
  },
};
</script>



<style lang='less' scoped>
//添加按钮的样式
.addBtn {
  margin: 15px 5px;
}
</style>